<template>
	<view>
    <headBar :title="title"></headBar>
		<view class="query"></view>
		<view class="u-skeleton">
			<view class="">
				<view class="u-flex u-row-left u-flex-wrap u-p-l-40" style="padding-top:40px;">
					<block >
						<block v-for="(item) in imageList" >
							<view class="tab u-skeleton-fillet" @click="x_redirect('/jjbz/detail/detail?params='+JSON.stringify(item))">
                <view v-if="item.txt" style="position: absolute;top:5px;left:5px;background: #fbc02d;color:#FFFFFF;">{{item.txt}}</view>
								<image :src="item.thumbnail" style="width: 215rpx;height: 350rpx;" mode="aspectFill"></image>
							</view>
						</block>
					</block>
				</view>
			</view>
			<view v-if="noData"
			class="u-flex u-flex-col u-col-center"
			style="width: 100vw;height: 50vh;padding-top: 200rpx;background-color: #FFFFFF;">
				<view class="">
					<image style="width: 300rpx;height: 300rpx;" src="/static/nodata.png"></image>
				</view>
				<view class="u-tips-color u-font-12 u-p-t-30">
					没有数据哦~
				</view>
			</view>
		</view>

		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" :font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8"/>
		</view>

		<view class="safe-area-inset-bottom">
			<view class="" style="height: 1px;"></view>
		</view>

		<u-skeleton :loading="skeletonLoad" :animation="true" bgColor="#FFF" el-color="#F3F3F3"></u-skeleton>

		<view @click="backTop" class="back backTop u-flex u-flex-col u-row-center u-col-center" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/backtop.png" style="width: 36rpx;height: 36rpx;"></image>
			<view class="text">顶部</view>
		</view>
    <fooBar nav="list"></fooBar>
	</view>
</template>

<script>
import b from '@/common/base.js';
	export default {
		data() {
			return {
				noData: false,
				skeletonLoad: true,
				title: '',
				modelType: '',
				modelId: 0,
        imageList:[],
				categoryList: [],
				pageIndex: 1,
				loadStatus: 'loadmore',
				// 滚动的位置
				rolldistance: '',
				adFlag: true,
				backShow: false,
			}
		},
		async onLoad({type}) {
			var t = this
			t.modelType = type
			if(type=='collect'){
				t.title = '我的收藏'
			}else if(type=='history'){
				t.title = '我的足迹'
			}else if(type=='zan'){
        t.title = '我的点赞'
      }else if(type=='download'){
        t.title = '我的下载'
      }
      t.getList();
			setTimeout(() => {
				t.skeletonLoad = false;
			}, 200)
		},
		methods: {

			async getList(){
        let t = this;
        uni.showLoading({
          mask: true,
          title: '正在拼命加载中...'
        })
        let type = 'History';
        if(t.modelType == "collect"){
          type = 'Collect';
        }else if(t.modelType == "zan"){
          type = 'Zan';
        }else if(t.modelType == "download"){
          type = 'Down';
        }else if(t.modelType == "history"){
          type = 'History';
        }
        let key = 'image'+type+'List';
        let list = t.xcget(key);
        if(list){
          list = JSON.parse(list);
          t.imageList = list;
        }
        uni.hideLoading();
      },
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
        },
      },
      onPageScroll(e) {
        if(e.scrollTop > 1000){
          this.backShow = true
        }else{
          this.backShow = false
        }
      },
	}
</script>

<style lang="scss">
   .top70{top:70px;}
	.menu{
		position: fixed;
		left: 0;
		width: calc(100% - 60rpx);
		z-index: 99;
		background-color: #FFFFFF;
	}
	.menus{
		position: fixed;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}
	.tags{
		font-size: 14px;
		background-color: #F5F6F8;
		color: #909399 ;
		border-radius: 40rpx;
		margin-right: 20rpx;
		line-height: 50rpx;
		padding: 0 40rpx;
		white-space:nowrap;
	}
	.tag-active{
		background-image: linear-gradient(100deg, #fcfc44 , #f8c93c);
		color: #333333;
		box-shadow: 0px 0px 10px #fff8ab;
		animation: tiaobig 0.8s ease-in-out alternate infinite;
		animation-iteration-count:1;
	}
	@keyframes tiaobig {
		0% {
			transform: scale(0.98);
		}
		25% {
			transform: scale(1.08);
		}
		50% {
			transform: scale(0.94);
		}
		75% {
			transform: scale(1.06);
		}
		100% {
			transform: scale(1);
		}
	}

	.tab{
		position: relative;
		width: 215rpx;
		height: 350rpx;;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		image{
			border-radius: 16rpx;
			display: block;
		}
		.array{
			position: absolute;
			top: 18rpx;
			right: 0rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 0rpx 12rpx 0 16rpx;
			border-radius: 20rpx 0 0 20rpx;
			font-size: 12px;
		}
	}
	.back{
		position: fixed;
		right: -80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		padding: 8rpx;
		box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
		transition-property: right;
		transition-duration: 0.6s;
		image{
			display: block;
		}
		.text{
			font-size: 14px;
		}
	}
	.backSearch{
		bottom: 200rpx;
		background-color: #efb336;
		.text{
			color: #FFFFFF;
		}
	}
	.backTop{
		bottom: 100rpx;
		background-color: #FFFFFF;
		.text{
			color: #efb336;
		}
	}
	.backTop_show{
		right: 20rpx!important;
	}
	.backTop_hide{
		right: -80rpx!important;
	}
</style>
